<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=Cache-Control content=no-cache />
    <title>口算10以内乘法---生成器1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            text-align: center;
        }

        #app h2 {
            width: 500px;
            margin: 0 auto;
            text-align: center;

            margin-bottom: 10px;
        }

        #app button {
            display: inline-block;
            width: 100px;
            margin: 0 auto;
            margin-bottom: 20px;

        }

        .qlist {
            list-style: none;
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        .qlist li {
            float: left;
            width: 220px;
            margin-bottom: 6px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>通通加油哦</h2>
        <button v-on:click="doMakeClick('')">重新生成</button>
        <button v-on:click="history.go(-1)">返回</button>
        <h2>{{curtime}}</h2>

        <ul class="qlist">
            <li v-for="(item,index) in questions">
                {{index+1}})、 {{item}}
            </li>
        </ul>
    </div>

</body>
<script src="./vue.min.js"></script>
<script>

    function makeOneQuestion() {
        var result = "";
        var mResult = "";
        var num1 = Math.ceil(Math.random() * 9);
        var num2 = Math.ceil(Math.random() * 9);
        var oper1 = "*";
        result = num1 + oper1 + num2;
        if (eval(result) < 0 || eval(result) > 100) {
            result = "";
        }
        return result;
    }

    new Vue({
        el: '#app',
        data: {
            counter: 0,
            curtime: "",
            questions: []
        },
        methods: {
            doMakeClick: function () {
                console.log("-----开始生成题目-----");
                var nums = 100;
                this.questions = [];
                while (this.questions.length < 100) {
                    var q = makeOneQuestion();
                    if (q) {
                        this.questions.push(q);
                    }
                }
                console.log(this.questions);

                // 增加生成时间

                var myDate = new Date();
                this.curtime = myDate.toLocaleString();     //获取当前时间
            }
        },
        ready: function () {
            this.$options.methods.doMakeClick();
        }
    })

</script>

</html>